<template>
  <Input v-model="variables.plData.content" type="textarea" :autosize="{ minRows: 4 }" maxlength="500" show-word-limit
    placeholder="写句首评是温柔的开始~" />
  <Expression @click-emoji="append" />

  <transition name="move-up" v-show="plyhState">
    <div class="plinfo">
      <Tooltip content="起一个独一无二的昵称吧" max-width="180" placement="top">
        <Input v-model="variables.plData.nickname" maxlength="8" show-word-limit placeholder="必填">
        <template #prepend>
          <span>昵称</span>
        </template>
        </Input>
      </Tooltip>

      <Tooltip content="收到回复将会邮件通知您" max-width="180" placement="top">
        <Input v-model="variables.plData.email" maxlength="20" show-word-limit placeholder="必填">
        <template #prepend>
          <span>邮箱</span>
        </template>
        </Input>
      </Tooltip>

      <Tooltip content="可以通过昵称访问您的博客" max-width="180" placement="top" v-if="plType.type != 'Moments'">
        <Input v-model="variables.plData.blogUrl" maxlength="100" show-word-limit placeholder="选填">
        <template #prepend>
          <span>网址</span>
        </template>
        </Input>
      </Tooltip>

      <Button type="primary" @click="fbpl" :disabled="fbplanState">发表</Button>
    </div>
  </transition>
</template>
<script setup>
  import { Notice } from "view-ui-plus";
  import { eventBus } from "../../js/eventBus.js";
  import variables from "../../js/variable";
  const axios = inject("axios");
  import Expression from "../Expression.vue";

  const fbplanState = ref(true); //发表按钮状态
  const plyhState = ref(false); //评论昵称、邮箱、网址、发表按钮整个大div的状态

  //添加表情
  function append (file) {
    variables.plData.content += file;
  }

  const route = useRoute();
  // 评论类型
  const plType = defineProps(["type"]);

  //判断用户是否登录回显评论框
  if (variables.userInfo.value) {
    variables.plData.nickname = variables.userInfo.value.account;
    variables.plData.email = variables.userInfo.value.email;
  }

  //判断当前是哪个页面的评论框，设置对应数据
  if (plType.type == "Article") {
    variables.plData.classify = +1;
    variables.plData.targetId = +route.params.id; //文章id
    variables.plData.content = "";
    variables.findPl.targetId = +route.params.id; //文章id
    variables.findPl.classify = +1;
  } else if (plType.type == "About") {
    variables.plData.targetId = +0;
    variables.plData.content = "";
    variables.plData.classify = +2;
    variables.findPl.targetId = +0;
    variables.findPl.classify = +2;
  } else if (plType.type == "Moments") {
    variables.plData.classify = +3;
    variables.plData.content = "";
    variables.plData.targetId = +0;
    variables.findPl.targetId = +0;
    variables.findPl.classify = +3;
  } else if (plType.type == "Links") {
    variables.findPl.targetId = +0;
    variables.findPl.classify = +4;
    variables.plData.targetId = +0;
    variables.plData.classify = +4;
  }

  //发送评论
  function fbpl () {
    if (variables.plData.commentId != null) {
      variables.plData.type = 2;
    } else {
      variables.plData.type = 1;
    }

    axios
      .post("comment/addComment", variables.plData, { loading: true })
      .then((response) => {
        let res = response.data;
        if (res.code != 200) {
          Notice.error({
            title: "失败",
            desc: res.msg,
          });
        } else {
          Notice.success({
            title: "评论成功！",
          });
          //------------如果是回复评论则需要关闭回复评论框
          if (variables.plData.type == 2 || plType.type == "Moments") {
            eventBus.emit("qxhf");
          }
          //重置发送评论数据
          eventBus.emit("emptyPlData");
          //重新查询评论数据
          if (plType.type == "Moments") {
            eventBus.emit("findMoments");
          } else {
            eventBus.emit("findComment");
          }
        }
      })
      .catch(() => { });
  }

  watch(variables.plData, (newValue, oldValue) => {
    if (oldValue.content) {
      plyhState.value = true;
    } else {
      plyhState.value = false;
    }
    // 监视评论框中数据改变发表评论按钮状态
    if (oldValue.content && oldValue.nickname && oldValue.email) {
      fbplanState.value = false;
    } else {
      fbplanState.value = true;
    }
  });
</script>
<style scoped>
  .plinfo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px;
  }
</style>